<!--thymeleaf-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<div class="container">
    <div class="box">
        <div class="transition-box">
            <div class="login-box">
                <h1>欢迎回来</h1>
                <section>
                    <label for="login-username">账号</label>
                    <input type="text" id="login-username"/>
                </section>
                <section>
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password"/>
                    <span>忘记密码?</span>
                </section>
                <button type="button" id="login">登录</button>
            </div>
            <div class="reg-box" style="display: none">
                <h1>立即注册</h1>
                <section>
                    <label for="reg-username">用户名</label>
                    <input type="text" id="reg-username"/>
                </section>
                <section>
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password"/>
                </section>
                <button type="button" id="reg">注册</button>
            </div>
        </div>
        <div class="transferToReg">
            <h1 class="title">还未注册？</h1>
            <span class="subTitle">立即注册，发现大量机会！</span>
            <button type="button" id="transferBtn">注册</button>
        </div>
    </div>
</div>
</body>
<script>
    let transfer = document.getElementById('transferBtn');
    transfer.addEventListener('click', function () {
        let login = document.querySelector('.login-box');
        let reg = document.querySelector('.reg-box');
        let total = document.querySelector('.transition-box');
        let target = document.querySelector('.transferToReg');
        let title = document.querySelector('.title');
        let subTitle = document.querySelector('.subTitle');
        transfer.innerText === '注册'
            ? (() => {
                target.style.left = 0;
                total.style.left = 260 + 'px';
                transfer.innerText = '登录';
                title.innerText = '已有帐号？';
                subTitle.innerText = '有帐号就登录吧，好久不见了！';
                setTimeout(() => {
                    login.style.display = 'none';
                    reg.style.display = 'flex';
                }, 300);
            })()
            : (() => {
                target.style.left = 640 + 'px';
                total.style.left = 0;
                transfer.innerText = '注册';
                title.innerText = '还未注册？';
                subTitle.innerText = '立即注册，发现大量机会！';
                setTimeout(() => {
                    login.style.display = 'flex';
                    reg.style.display = 'none';
                }, 300);
            })();
    });
    // 登录
    document.getElementById('login').addEventListener('click', function() {
        let username = document.getElementById('login-username');
        let password = document.getElementById('login-password');
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://127.0.0.1:8080/auth/login', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
        xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type');
        var data = JSON.stringify({
            tenantId: 'FWJ',
            grant_type: 'password',
            username: username.value,
            password: password.value
        });
        xhr.send(data);
        // 处理返回的数据
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                console.log(response);
                if (response.code === 200) {
                    alert('登录成功');
                    window.location.href = 'index.html';
                } else {
                    alert('登录失败');
                }
            }
        };
    });
</script>
</html>
